<template>
    <div id="myhead">
       <div class='myheadwidth'>
            <div class='myhead-left'>
                <ol>
                    <li v-for="(item,i) in leftList " :key='i'>{{item}}</li>
                </ol>
            </div>
            <div class='myhead-right'>
                <ol>
                    <li v-for="(item,i) in rightList " :key='i'>{{item}}</li>
                </ol>
            </div>
       </div>
    </div>
</template>

<script>
export default {
    name: 'myhead',
    data() {
        return {
            leftList:['小米商城','MIUI','loT','天星数科','有品','小爱开发平台','企业团构','资质证照','协议规则','下载app','智能生活','Select Location'],
            rightList:['登录','注册','消息通知','购物车']
        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#myhead{
    width: 100%;
    height: 40px;
    background-color: #333333;
    font-size: 12px;
   .myheadwidth{
        width: 1226px;
        height: 40px;
        color: #B0B0B0;
        margin: 0 auto;
        .myhead-left{
            width:795px;
            float: left;
            ol{
                line-height: 40px;
                li{
                     float: left;
                     margin-right: 18px;
                }
            }
        }
         .myhead-right{
            float: right;
             ol{
                line-height: 40px;
                li{
                     float: left;
                     margin-right: 18px;
                }
            }
        }
   }
}
</style>
